<template>
	<div class="o_detail" @tap="toOrderDetail(item.children[0].orderId)">
		<p class="detail1">
			<span>订单号：{{ item.children[0].orderId }}</span>
			<span class="color1">{{ item.children[0].statusDesc }}</span>
		</p>
		<div class="xian"></div>
		<div class="detail2">
			<div class="pic">
				<image :src="item.children[0].skuImg" mode="aspectFill"></image>
			</div>
			<div class="right">
				<p class="title">{{ item.children[0].spuTitle }}</p>
				<p class="type">购买</p>
				<div class="price_div">
					<p>¥<span>{{ item.children[0].skuPrice / 100 | moneyFilter }}</span></p>
					<div class="price_button" v-if="item.info.status == 'waiting_pay'" @tap.stop="pay(item)">支付</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		methods:{
			toOrderDetail(id){
				this.$ma.route.order_detail({
					detailId: id
				})
			},
			pay(item){
				console.log(item)
				this.$emit('pay',item)
			}
		}
	}
</script>

<style lang="scss">
	.o_detail {
		width: 91.47vw;
		height: 45.6vw;
		background-color: #1b1b1b;
		margin-bottom: 2.67vw;
		border-radius: 4.27vw;
		padding: 0 4.27vw 0 5.33vw;
	
		// 上部分
		.detail1 {
			padding: 4.27vw 0;
			font-size: 3.2vw;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			font-weight: 300;
			color: #555555;
		}
	
		.color1 {
			color: #FFA15C;
			font-weight: 500;
		}
	
		.color2 {
			color: #555555;
			font-weight: 500;
		}
	
		// 线
		.xian {
			width: 81.87vw;
			height: 1px;
			border-bottom: 1px dashed #000000;
		}
	
		.detail2 {
			width: 80.8vw;
			height: 24vw;
			margin-top: 4.27vw;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
	
			.pic {
				width: 24vw;
				height: 24vw;
				background-color: #f8f8f8;
				border-radius: 4.27vw;
				overflow: hidden;
	
				image {
					width: 24vw;
					height: 24vw;
				}
			}
	
			.right {
				width: 53.6vw;
				height: 24vw;
	
				.title {
					height: 10.67vw;
					font-size: 3.73vw;
					color: #ffffff;
					font-weight: 500;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
	
				.type {
					font-size: 3.2vw;
					color: #555555;
					font-weight: 300;
				}
	
				.price_div {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
	
					p {
						color: #A972FF;
						font-size: 3.2vw;
						font-weight: 300;
						padding-top: 2.67vw;
	
						span {
							font-size: 4.27vw;
							font-weight: 500;
						}
					}
	
					.price_button {
						width: 17.07vw;
						height: 8.53vw;
						background-color: #A972FF;
						color: #000000;
						font-size: 3.2vw;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5.33vw;
						box-shadow: 0 1vw 2vw rgba(71, 12, 114, 0.48);
					}
				}
			}
		}
	}
</style>